<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-show="loading">Loading...</dv-loading>
      <!-- 标题行 -->
      <div v-show="!loading" class="host-body">
        <div class="title">
          <div class="head-left">
            <div>
              <router-link
                to="/building"
                active-class="activeClass"
                tag="a"
                class="font"
                style="margin-left:0"
              >城市建设</router-link>
              <!-- <span>城市建设</span> -->
              <!-- <span class="font">房地产数据展示</span> -->
              <!-- <span class="font">园林市政</span> -->
            </div>
          </div>
          <div class="head-right">
            <div>
              <router-link to="/estate" active-class="activeClass" tag="a" class="font">房地产数据展示</router-link>

              <!-- <span class="font" style="margin-left:0">农村生活污水</span>
              <span class="font">危房排查及改造</span>
              <span class="font">历史文化建设</span>-->
            </div>
          </div>
          <router-link to="/" exact tag="a" class="head-title-font">城建行业综合监测平台</router-link>
          <!-- <span class="head-title-font">城建行业综合监测平台</span> -->
        </div>
      </div>
      <!-- 内容主要部分 -->
      <div v-show="!loading" style="height:100%">
        <router-view />
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    };
  },
  components: {},
  mounted() {
    this.cancelLoading();
  },
  methods: {
    cancelLoading() {
      // this.loading = false;
      setTimeout(() => {
        this.loading = false;
      }, 2500);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/datav/index.scss";

.activeClass {
  color: #fff;
  text-shadow: -0.5em 0 0.8em #00ecffa1, 0.5em 0 0.8em #00ecffa1,
    0 0.5em 0.8em #00ecffa1, 0 -0.5em 0.8em #00ecffa1;
  // color: white;
  // background: rgba(168, 185, 226, 0.3);
}
// .font {
//   display: inline-block;
//   width: 10rem;
//   height: 3rem;
//   line-height: 3rem;
//   text-align: center;
// }
.item {
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}
.left-first {
  background-color: #222222;
  grid-row-start: 1;
  grid-row-end: 4;
}
.center-top {
  background-color: #ef342a;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
</style>
